<template>
  <view v-if="platform === 'H5'" class="nothing"></view>
  <view v-else class="XNavBar">
    <view class="statusBar"></view>
    <view class="titleBar">
      <uni-icons
        class="navigateBack"
        type="back"
        :color="titleColor"
        size="24"
        v-if="currentPages.length > 1"
        @click.stop="navigate({ navMethod: 'navigateBack' })"
      />
      <uni-icons
        class="navigateBack"
        type="home"
        :color="titleColor"
        size="24"
        v-else
        @click.stop="navigate({ url: '/pages/home3/index', navMethod: 'reLaunch' })"
      />
      <view class="content">
        <text
          v-if="title"
          id="nav-title"
          :class="{ titleText: true, scrollNavTitle: title.length > 7 }"
        >
          {{ title }}
        </text>
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { navigate } from "@/util/navigate";
import { platform } from "@/util/platform";
import store from "@/store/store";
const props = defineProps({
  title: {
    type: String,
    required: false,
  },
  bgColor: {
    type: String,
    required: false,
    default: "transparent",
  },
  titleColor: {
    type: String,
    required: false,
    default: "#ffffff",
  },
});
onMounted(() => {
  setBarHeight();
  currentPages.value = getCurrentPages();
  setTimeout(() => {
    const selectorQuery = uni.createSelectorQuery();
    const nodesRef = selectorQuery.select("#nav-title");
    nodesRef
      .boundingClientRect((v: any) => {
        titleTo.value = v?.width ? `-${v.width}px` : "-100%";
        titleFrom.value = v?.width ? `180px` : "100%";
      })
      .exec();
  }, 0);
});
const titleTo = ref("");
const titleFrom = ref("");
const currentPages = ref([]);
const statusBarHeight = ref("");
const titleBarHeight = ref("");
function setBarHeight() {
  const { statusBarHeight: statusBar, titleBarHeight: titleBar } = store.programState;
  statusBarHeight.value = `${statusBar}px`;
  titleBarHeight.value = `${titleBar}px`;
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
.XNavBar {
  background: v-bind(bgColor);
  > .statusBar {
    height: v-bind(statusBarHeight);
  }
  > .titleBar {
    color: v-bind(titleColor);
    height: v-bind(titleBarHeight);
  }
  .scrollNavTitle {
    animation: 10s linear 0s infinite reverse moveTitle;
  }
  @keyframes moveTitle {
    0% {
      left: v-bind(titleTo);
    }
    100% {
      left: v-bind(titleFrom);
    }
  }
}
</style>
